<template>
  <div>
    <headers :title="'全部分类'"></headers>
    <van-search
      class="search"
      @click="$router.push('/search')"
      placeholder="请输入搜索关键词"
    />

    <div class="float-left scroll">
      <van-sidebar
        v-model="activeKey"
        @change="classGoods = list[activeKey].children"
      >
        <van-sidebar-item
          v-for="item in list"
          :key="item.category_id"
          :title="item.name"
        />
      </van-sidebar>
    </div>

    <div class="scroll">
      <van-grid :column-num="3" icon-size="120">
        <van-grid-item
          v-for="value in classGoods"
          :key="value.category_id"
          :icon="value.image.external_url"
          :text="value.name"
        />
      </van-grid>
    </div>
  </div>
</template>

<script>
import { classList } from "@/api/class";
import headers from "@/components/header";
export default {
  name: "AppClass",
  data: () => {
    return {
      list: [],
      activeKey: 0,
      classGoods: [],
    };
  },
  async created() {
    const {
      data: { list },
    } = await classList();
    this.list = list;
    this.classGoods = this.list[0].children;
  },
  components: {
    headers,
  },
};
</script>

<style scoped lang="less">
@import url("../../style/bootstrap.css");
.scroll {
  height: 100vh;
  overflow: auto;
}
</style>